<!-- banner -->
<template>
  <div class="banner">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) of banner" :key="index">
          <a :href="item.link" target="_blank">
            <img :src="item.image_url" :alt="item.description">
          </a>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <div class="banner_lot">
        <div class="notice_shadow"></div>
        <div class="notice">
          <div class="notice_title">
            <li><img src="../../assets/img/notice.png" alt=""></li>
            <router-link tag="li" to="/exam">更多</router-link>
          </div>
          <div class="notice_list">
            <li
              v-for="(item, index) of newList"
              :key="index"
              :class="item.is_hot === 1 ? 'active' : ''"
               @click="jumpInfo(item.news_id, item.cat_one_id)">
              <p>{{item.title}}</p>
              <p>{{item.publish_time}}</p>
            </li>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  data () {
    return {
      newList: []
    }
  },

  props: {
    banner: Array
  },

  created () {
    this.newLists()
  },

  mounted () {
    // eslint-disable-next-line
    new Swiper('.swiper-container', {
      autoplay: true,
      loop: true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable :true,
      }
    })
  },

  components: {},

  computed: {},

  methods: {
    // 公告跳转
    jumpInfo (id, catId) {
      let routeData = this.$router.resolve({
        name: 'examInfor',
        query: {
          news_id: id,
          cat_one_id: catId
        }
      })
      window.open(routeData.href, '_blank')
    },
    // 招考公告
    newLists () {
      this.$http.post('/news/newsLists', {
        news_type: 1,
        is_top: 1
      }).then((res) => {
        this.newList = res.data.data
        this.newList.map((res, index) => {
          var time = this.getDay(res.publish_time)
          this.newList[index].publish_time = time
        })
      })
    },
    // 获取时间戳转年月日
    getDay (data) {
      var date = new Date(data * 1000)
      // var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      // h = date.getHours() + ':'
      // m = date.getMinutes() + ':'
      // s = date.getSeconds()
      return M + D
    }
  }
}

</script>
<style lang='scss' scoped>
.swiper-slide a{
  display: block;
}
.swiper-slide a img{
  width: 100%;
}
.banner{
  min-width: 1200px;
  position: relative;
  z-index: 1;
}
.banner_lot{
  width: 1200px;
  position: absolute;
  z-index: 3;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
}
.notice_shadow{
  width: 387px;
  height: 265px;
  background: #ffffff;
  position: absolute;
  z-index: 8;
  top: 100px;
  right: 0px;
  opacity: 0.5;
  box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
}
.notice{
  width: 387px;
  height: 285px;
  background: #ffffff;
  position: absolute;
  z-index: 8;
  top: 90px;
  right: 10px;
  box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
  box-sizing: border-box;
  padding: 16px 24px;
}
.notice_title{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items:flex-end;
  line-height: 31px;
  font-size:22px;
  font-family:SourceHanSerifCN-Heavy;
  font-weight:bold;
  color:rgba(34,34,34,1);
}
.notice_title li{
  font-family:SourceHanSerifCN-Heavy;
  font-size: 12px;
}
// .notice_title li{
//   margin-top: -10px;
//   margin-left: 5px;
// }
.notice_title li:last-child{
  width: 40px;
  cursor: pointer;
  background: url('../../assets/img/add.png') no-repeat;
  background-position: 28px 6px;
  margin-right: -10px;
}
.notice_title li:last-child:hover{
  width: 40px;
  cursor: pointer;
  background: url('../../assets/img/add_hover.png') no-repeat;
  background-position: 25px 4px;
}
.notice_list{
  height: 210px;
  overflow: hidden;
}
.notice_list li{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  line-height: 25px;
  margin-top: 8px;
  cursor: pointer;
}
.notice_list li p:first-child{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  width: 260px;
}
.notice_list li p:last-child{
  width: 80px;
  text-align: right;
}
.notice_list li:first-child{
  margin-top: 16px;
}
.notice_list li p{
  font-size: 16px;
}
// .notice_list li:nth-child(1){
//   font-weight: bold;
//   color:rgba(204,41,41,1);
// }
// .notice_list li:nth-of-type(3n-2){
//   font-weight: bold;
//   color:rgba(204,41,41,1);
//   margin-top: 16px;
// }
.notice_list li.active{
  // font-weight: bold;
  color:rgba(204,41,41,1);
  margin-top: 8px;
}
@media only screen and (min-width: 1700px) and (max-width: 1920px){
  .notice_shadow{
    width: 387px;
    height: 265px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 80px;
    right: 0px;
    opacity: 0.5;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
  }
  .notice{
    width: 387px;
    height: 285px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 70px;
    right: 10px;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
    box-sizing: border-box;
    padding: 16px 24px;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 1700px){
  .notice_shadow{
    width: 387px;
    height: 265px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 60px;
    right: 0px;
    opacity: 0.5;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
  }
  .notice{
    width: 387px;
    height: 285px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 50px;
    right: 10px;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
    box-sizing: border-box;
    padding: 16px 24px;
  }
}
@media only screen and (min-width: 1500px) and (max-width: 1600px){
  .notice_shadow{
    width: 387px;
    height: 265px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 50px;
    right: 0px;
    opacity: 0.5;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
  }
  .notice{
    width: 387px;
    height: 285px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 40px;
    right: 10px;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
    box-sizing: border-box;
    padding: 16px 24px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1500px){
  .notice_shadow{
    width: 387px;
    height: 265px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 40px;
    right: 0px;
    opacity: 0.5;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
  }
  .notice{
    width: 387px;
    height: 285px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 30px;
    right: 10px;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
    box-sizing: border-box;
    padding: 16px 24px;
  }
}
@media only screen and (min-width: 1300px) and (max-width: 1400px){
  .notice_shadow{
    width: 387px;
    height: 265px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 30px;
    right: 0px;
    opacity: 0.5;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
  }
  .notice{
    width: 387px;
    height: 285px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 20px;
    right: 10px;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
    box-sizing: border-box;
    padding: 16px 24px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1300px){
  .notice_shadow{
    width: 387px;
    height: 265px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 20px;
    right: 0px;
    opacity: 0.5;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
  }
  .notice{
    width: 387px;
    height: 285px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 10px;
    right: 10px;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
    box-sizing: border-box;
    padding: 16px 24px;
  }
}
</style>
